<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>商品列表</title>
    <link rel="stylesheet" href="/static/js/antd@1.7.8/antd.min.css">
    <style>
        .ml-1em {
            margin-left: 1em;
        }

        .fr {
            float: right;
        }

        .ap-price {
            font-size: 120%;
            color: red;
        }

        .ap-label {
            color: #333;
            font-size: 75%;
        }

        .ap-infinite-container {
            padding-right: 20px;
            overflow: auto;
        }

        .ap-loading-container {
            position: absolute;
            bottom: 40px;
            left: 0;
            right: 0;
            text-align: center;
        }

        .ap-top-bar {
            height: 50px;
        }

        .ap-goods-info {
            margin: 0;
            padding: 0;
        }

        .ap-no-more-data {
            clear: both;
            text-align: center;
        }
    </style>
</head>
<body>


<div id="app">
    <div>
        <div style="background-color: #ececec; padding: 20px;">
            <div class="ap-top-bar">
                <a-input-search placeholder="" size="large" enter-button @search="onSearch"/>
            </div>
            <div v-infinite-scroll="handle_infinite_onLoad"
                 class="ap-infinite-container"
                 :infinite-scroll-disabled="loading"
                 :infinite-scroll-distance="10"
                 :style="`height:${list_height}px`">
                <a-row :gutter="[16,16]" v-for="goods_row_data in goods_list">
                    <a-col :span="col_span" v-for="goods_item in goods_row_data">
                        <a-card>
                            <img slot="cover"
                                 :src="goods_item.pict_url"/>
                            <a-card-meta>
                                <template slot="title">
                                    <a v-if="query.keyword" :href="goods_item.url || goods_item.item_url" target="_blank">${goods_item.title}</a>
                                    <a v-else :href="goods_item.coupon_click_url || goods_item.click_url" target="_blank">${goods_item.title}</a>
                                </template>
                                <template slot="description">
                                    <p class="ap-goods-info">
                                        <span class="ap-price"><small>￥</small>${goods_item.zk_final_price}</span>
                                        ${void(commission_price = calc_commission(goods_item))}
                                        <span class="ap-label fr" v-if="commission_price > 0">
                                            反佣 <span class="ap-price"><small>￥</small>${commission_price}</span>
                                        </span>
                                    </p>
                                </template>
                            </a-card-meta>
                        </a-card>
                    </a-col>
                </a-row>
                <div v-if="loading" class="ap-loading-container">
                    <a-spin/>
                </div>
                <div class="ap-no-more-data" v-if="no_more_data">没有更多数据</div>
            </div>
        </div>
    </div>
</div>

<script src="/static/js/vue.min.js"></script>
<script src="/static/js/moment.min.js"></script>
<script src="/static/js/reqwest.min.js"></script>
<script src="/static/js/axios.min.js"></script>
<script src="/static/js/vue-infinite-scroll.min.js"></script>
<script src="/static/js/antd@1.7.8/antd.min.js"></script>
<script src="/static/js/bignumber.min.js"></script>

<script>
    const list_height = window.innerHeight - 90;
    const col_num = 6;
    const col_span = 24 / col_num;
    const vue = new Vue({
        el: '#app',
        delimiters: ['${', '}'],
        directives: {infiniteScroll},
        data() {
            return {
                col_num: col_num,
                col_span: col_span,
                goods_list: [],
                data: [],
                query: {
                    keyword: '',
                    page_no: 1,
                    page_size: 18
                },
                loading: false,
                list_height: list_height,
                no_more_data: false,
            };
        },
        created() {
            axios.defaults.headers.common['token'] = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJtZW1iZXJfaWQiOiIxNTgxMDU4NjYxNyIsImV4cCI6MzI4NTE2ODY5N30' +
                '.a1GX28rCI0hrL6uUciqHGi42EA2zVLToV2wjrmL0OiA';
        },
        methods: {
            calc_commission(goods_data) {
                const {zk_final_price, real_post_fee, commission_rate} = goods_data;
                let bn_val = new BigNumber(zk_final_price);
                const bn_rate_val = (new BigNumber(commission_rate)).div(1e4);
                const bn_real_post_fee = new BigNumber(real_post_fee)
                if (bn_real_post_fee.gt(0)) {
                    bn_val = bn_val.minus(real_post_fee)
                }
                return bn_val.multipliedBy(bn_rate_val).toFixed(2);
            },
            organize_query_params(params) {
                let {query} = this;
                let keyword = null;
                if (params) {
                    keyword = params.keyword;
                } else {
                    keyword = query.keyword;
                }
                if (query['keyword'] !== keyword) {
                    query = Object.assign(query, params);
                    query.page_no = 1;
                } else {
                    query = Object.assign(query, params);
                    query.page_no = parseInt(query['page_no']) + 1;
                }
                return query;
            },
            fetch_data(callback, params) {
                if (!this.no_more_data) {
                    this.loading = true;
                    const {keyword, page_no, page_size} = params;
                    let url = '/app/dg_optimus_material';
                    const query = {page_no, page_size}
                    if (keyword) {
                        url = '/app/dg_material_optional';
                        query.q = keyword;
                    }
                    axios.post(url, query).then((resp) => {
                        const {data: {code, data: {map_data}}} = resp;
                        if (code === 0) {
                            this.query = params;
                            callback(map_data);
                        }
                    }).catch(function (error) {
                        console.log(error);
                    }).finally(() => {
                        this.loading = false;
                    });
                }
            },
            handle_infinite_onLoad(params) {
                const {loading} = this;
                if (!loading) {
                    const {col_num, goods_list, query: {keyword}} = this;
                    if (params && keyword !== params.keyword) {
                        this.no_more_data = false;
                    }
                    params = this.organize_query_params(params);
                    this.fetch_data(res => {
                        if (res) {
                            let last_row_num = 0;
                            const goods_list_num = goods_list.length;
                            if (goods_list_num > 0) {
                                const last_data = goods_list[goods_list_num - 1];
                                if (last_data) {
                                    last_row_num = last_data.length;
                                    if (last_row_num > 0 && last_row_num < col_num) {
                                        goods_list.pop();
                                        res = last_data.concat(res);
                                    }
                                }
                            }
                            const num = res.length;
                            const row_arr = [];
                            for (let i = 0; i < num; i += col_num) {
                                row_arr.push(res.slice(i, i + col_num));
                            }
                            if (params.page_no === 1) {
                                this.goods_list = row_arr;
                            } else if (row_arr.length > 0) {
                                this.goods_list = goods_list.concat(row_arr);
                            }
                        } else {
                            this.no_more_data = true;
                        }
                    }, params);
                }
            },
            onSearch(keyword) {
                this.handle_infinite_onLoad({keyword});
            }
        },
    })
</script>
</body>
</html>
